<template>
  <div class="app-container">
    <header class="main-header">
      <div class="nav-container">
        <div class="logo" @click="returnToHome">
          <div class="logo-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28">
              <path fill="#ffffff"
                    d="M19.82 10.24l-4.06-4.06c-.19-.19-.44-.3-.71-.3h-6.1c-.27 0-.52.11-.71.3l-4.06 4.06c-.19.19-.3.44-.3.71v6.1c0 .27.11.52.3.71l4.06 4.06c.19.19.44.3.71.3h6.1c.27 0 .52-.11.71-.3l4.06-4.06c.19-.19.3-.44.3-.71v-6.1c0-.27-.11-.52-.3-.71zM13.75 9c0 .55-.45 1-1 1h-1.5c-.55 0-1-.45-1-1s.45-1 1-1h1.5c.55 0 1 .45 1 1zm1 4.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-4.5 0c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5z"/>
            </svg>
          </div>
          <span class="logo-text">集成医疗诊断平台</span>
        </div>
        <!-- 桌面端导航 -->
        <div class="nav-links desktop-nav">
          <span class="nav-link" @click="handleNavLinkClick('features')">功能介绍</span>
          <router-link to="/breast-cancer" class="nav-link">乳腺癌诊断</router-link>
          <router-link to="/cervical-cancer" class="nav-link">宫颈癌诊断</router-link>
          <span class="nav-link" @click="handleNavLinkClick('guide')">使用指南</span>
          <span class="nav-link" @click="handleNavLinkClick('about')">关于我们</span>
        </div>
        
        <!-- 移动端汉堡菜单按钮 -->
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <div class="hamburger" :class="{ active: mobileMenuOpen }">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 移动端菜单覆盖层 -->
    <div class="mobile-menu-overlay" :class="{ active: mobileMenuOpen }" @click="closeMobileMenu">
      <nav class="mobile-nav" @click.stop>
        <div class="mobile-nav-links">
          <span class="mobile-nav-link" @click="handleMobileNavClick('features')">功能介绍</span>
          <router-link to="/breast-cancer" class="mobile-nav-link" @click="closeMobileMenu">乳腺癌诊断</router-link>
          <router-link to="/cervical-cancer" class="mobile-nav-link" @click="closeMobileMenu">宫颈癌诊断</router-link>
          <span class="mobile-nav-link" @click="handleMobileNavClick('guide')">使用指南</span>
          <span class="mobile-nav-link" @click="handleMobileNavClick('about')">关于我们</span>
        </div>
      </nav>
    </div>
    
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<script setup>
// 组件逻辑
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

// 返回首页顶部
const returnToHome = () => {
  // 强制返回首页
  if (route.path !== '/') {
    router.push('/').then(() => {
      nextTick(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    }).catch(err => console.error('导航错误', err));
  } else {
    // 如果已经在首页，直接滚动到顶部
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
};

// 后端服务状态
const backendReady = ref(false);
const backendChecking = ref(true);

// 移动端菜单状态
const mobileMenuOpen = ref(false);

// 监听路由变化，处理锚点滚动
watch(() => route.hash, 
  (newHash) => {
    if (newHash) {
      // 确保DOM已完全加载并渲染
      nextTick(() => {
        // 添加更长的延迟确保页面渲染完成
        setTimeout(() => {
          const element = document.querySelector(newHash);
          if (element) {
            element.scrollIntoView({ behavior: 'smooth' });
          }
        }, 500);
      });
    }
  }
);

// 监听路由路径变化，处理页面滚动到顶部
watch(() => route.path, 
  () => {
    // 如果没有哈希值，滚动到顶部
    if (!route.hash) {
      nextTick(() => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    }
  }
);

// 处理导航链接点击
const handleNavLinkClick = (sectionId) => {
  // 如果已经在首页，直接滚动
  if (route.path === '/') {
    const element = document.getElementById(sectionId);
    if (element) {
      // 使用scrollIntoView并考虑导航栏高度
      element.scrollIntoView({ behavior: 'smooth' });
    }
  } else {
    // 否则先导航到首页，然后通过路由的hash触发滚动
    router.push(`/#${sectionId}`);
  }
};

// 移动端菜单控制
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
  // 防止背景滚动
  if (mobileMenuOpen.value) {
    document.body.style.overflow = 'hidden';
  } else {
    document.body.style.overflow = '';
  }
};

const closeMobileMenu = () => {
  mobileMenuOpen.value = false;
  document.body.style.overflow = '';
};

// 处理移动端导航链接点击
const handleMobileNavClick = (sectionId) => {
  closeMobileMenu();
  handleNavLinkClick(sectionId);
};

onMounted(() => {
  // 初始加载时，确保在首页时始终从顶部开始
  if (route.path === '/' && !route.hash) {
    window.scrollTo({ top: 0, behavior: 'auto' });
  }
  // 初始加载时处理哈希
  else if (route.hash) {
    // 延迟更长时间确保DOM完全加载
    setTimeout(() => {
      const element = document.querySelector(route.hash);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }, 800);
  }

  // 浏览器环境下，假设后端已就绪
  backendReady.value = true;
  backendChecking.value = false;
});

onUnmounted(() => {
  // 清理时恢复body滚动
  document.body.style.overflow = '';
});
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%) !important;
  background-attachment: fixed !important;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* 头部样式 */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(116, 235, 213, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.main-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(116, 235, 213, 0.3), rgba(172, 182, 229, 0.3));
  z-index: -1;
}

.nav-container {
  width: 100%;
  margin: 0;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  background: linear-gradient(90deg, rgba(116, 235, 213, 0.3), rgba(172, 182, 229, 0.3));
  z-index: 2;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 40px;
  cursor: pointer;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.logo-text {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: rgba(25, 25, 75, 0.9);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);
  letter-spacing: 0.5px;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 35px;
  padding-right: 40px;
}

.nav-link {
  color: rgba(25, 25, 75, 0.85);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 4px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(25, 25, 75, 0.8);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: rgba(25, 25, 75, 1);
}

.nav-link:hover::after {
  width: 100%;
}

/* 主内容区域，确保背景在所有页面中一致 */
.main-content {
  flex: 1;
  padding: 0;
  margin-top: 80px; /* 为固定的导航栏留出空间 */
  position: relative;
  min-height: calc(100vh - 80px);
}

.main-content::before {
  content: '';
  position: fixed;
  top: 80px; /* 导航栏高度 */
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 20%),
  radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 20%);
  z-index: -1;
  pointer-events: none;
}

/* 移动端菜单按钮 */
.mobile-menu-toggle {
  display: none;
  padding-right: 40px;
  cursor: pointer;
  z-index: 101;
}

.hamburger {
  width: 28px;
  height: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger span {
  width: 100%;
  height: 3px;
  background-color: rgba(25, 25, 75, 0.9);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

/* 移动端菜单覆盖层 */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.mobile-nav {
  position: absolute;
  top: 80px;
  right: 0;
  width: 280px;
  background: rgba(116, 235, 213, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px 0 0 20px;
  box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.mobile-menu-overlay.active .mobile-nav {
  transform: translateX(0);
}

.mobile-nav-links {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav-link {
  display: block;
  padding: 15px 30px;
  color: rgba(25, 25, 75, 0.9);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-nav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(25, 25, 75, 1);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  /* 隐藏桌面端导航 */
  .desktop-nav {
    display: none;
  }
  
  /* 显示移动端菜单按钮 */
  .mobile-menu-toggle {
    display: block;
  }
  .nav-container {
    padding: 15px 0;
  }
  
  .logo {
    padding-left: 20px;
  }
  
  .mobile-menu-toggle {
    padding-right: 20px;
  }

  .logo-text {
    font-size: 20px;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .logo {
    padding-left: 15px;
  }
  
  .mobile-menu-toggle {
    padding-right: 15px;
  }

  .logo-text {
    font-size: 18px;
  }
  
  .logo-icon {
    width: 32px;
    height: 32px;
  }

  .mobile-nav {
    width: 250px;
  }

  .mobile-nav-link {
    font-size: 15px;
    padding: 12px 25px;
  }
}
</style>